@import './variables.module.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';
@import './ruoyi.scss';

body {
  height: 100%;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.block {
  display: block;
}

.pointer {
  cursor: pointer;
}

.inlineBlock {
  display: block;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

aside {
  background: #eef1f6;
  padding: 8px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

//main-container全局样式
.app-container {
  padding: 20px;
}

.components-container {
  margin: 30px 50px;
  position: relative;
}

.text-center {
  text-align: center
}

.sub-navbar {
  height: 50px;
  line-height: 50px;
  position: relative;
  width: 100%;
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

  .subtitle {
    font-size: 20px;
    color: #fff;
  }

  &.draft {
    background: #d0d0d0;
  }

  &.deleted {
    background: #d0d0d0;
  }
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32, 160, 255);
  }
}

.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}
.status-circle {
  border-radius: 5px;
  height: 10px;
  margin-right: 6px;
  width: 10px;
  display: inline-block;
}
.grayStatus {
  background: #c4c4c3
}

.greenStatus {
  background: #96cc66
}

.yellowStatus {
  background: #facd91
}

.themStatus {
  background: #81d3f8
}

.redStatus {
  background: red
}






.font-10 {
  font-size: 10px
}

.font-11 {
  font-size: 11px
}

.font-12 {
  font-size: 12px
}

.font-13 {
  font-size: 13px
}

.font-14 {
  font-size: 14px
}

.font-15 {
  font-size: 15px
}

.font-16 {
  font-size: 16px
}

.font-18 {
  font-size: 18px
}

.font-20 {
  font-size: 20px
}

.font-22 {
  font-size: 22px
}

.font-24 {
  font-size: 24px
}

.font-28 {
  font-size: 28px
}

.font-700,.font-bold {
  font-weight: 700
}

.font-400 {
  font-weight: 400
}

.two-row-ellipsis {
  -webkit-line-clamp: 2
}

.three-row-ellipsis,.two-row-ellipsis {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal!important;
  word-break: break-all
}

.three-row-ellipsis {
  -webkit-line-clamp: 3
}

.ellipsis {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal!important;
  word-break: break-all
}


.light {
  color: #fff
}

.light-bg {
  background-color: #fff
}

.assertive {
  color: #ef473a
}

.assertive-bg {
  background-color: #ef473a
}

.calm {
  color: #09f
}

.calm-bg {
  background-color: #09f
}

.gray {
  color: #8a8a8a
}

.gray-bg {
  background-color: #8a8a8a
}

.light-gray-bg {
  background-color: #f6f6fd
}

.block {
  width: 100%
}

.color666 {
  color: #666
}

.bgcolor666 {
  background-color: #666
}

.colorAAA {
  color: #aaa
}

.bgcolorAAA {
  background-color: #aaa
}

.bgcolorFACD91 {
  background-color: #facd91
}

.colorCCC {
  color: #ccc
}

.bgcolorF6F6FD {
  background-color: #f6f6fd
}

.color333 {
  color: #333
}

.bgcolorCCC {
  background-color: #ccc
}

.bgcolorE8E8E8 {
  background-color: #e8e8e8!important
}

.colorFFF {
  color: #fff
}

.colorRed {
  color: red
}

.bgcolorFFF {
  background-color: #fff
}

.bgcolorF2F2F2 {
  background-color: #f2f2f2
}

.bgcolorF4F4F4 {
  background-color: #f4f4f4
}

.bgcolor-green {
  background-color: #1aad19
}

.color-green {
  color: #1aad19
}

.color-red {
  color: #ff6968
}

.color-D9001B {
  color: #d9001b
}

.color-70B603 {
  color: #70b603
}

.color-555555 {
  color: #555
}

.color-gray {
  color: #aaa
}

.bgcolor-gray {
  background-color: #aaa
}

.bgcolor-70B603 {
  background-color: #70b603
}

.color-lightgray {
  color: #ccc
}

.bgcolor-lightgray {
  background-color: #ccc
}

.bgcolor-F6F9FF {
  background-color: #f6f9ff
}

.label-color {
  color: #000000d9
}

.label-required:before {
  color: #f2021d;
  content: "*";
  display: inline-block;
  font-family: SimSun;
  font-size: 14px;
  line-height: 1;
  margin-right: 4px
}

.color-light-yellow {
  color: #ff8716
}

.color-yellow,.primary-color {
  color: #4a89f0
}

.grayStatus {
  background: #c4c4c3
}

.greenStatus {
  background: #96cc66
}

.yellowStatus {
  background: #facd91
}

.themStatus {
  background: #81d3f8
}

.redStatus {
  background: red
}

.fontColor {
  color: #b4907c
}

.color7F7F7F {
  color: #7f7f7f
}

.bgFACD91 {
  background: #facd91
}

.font4A89F0 {
  color: #4a89f0
}

.icon-xs {
  height: 16px;
  margin-right: 10px;
  width: 16px
}

.icon-sm {
  height: 20px;
  margin-right: 10px;
  width: 20px
}

.icon-md {
  height: 24px;
  margin-right: 10px;
  width: 24px
}

.icon-lg {
  height: 30px;
  margin-right: 10px;
  width: 30px
}

.text-center {
  text-align: center
}

.text-left {
  text-align: left
}

.text-right {
  text-align: right
}

.middle-center {
  align-items: center;
  display: flex;
  justify-content: center
}

.view-container {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0
}

.row {
  display: flex;
  width: 100%
}

.row-wrap {
  flex-wrap: wrap
}

.col {
  display: block;
  flex: 1 1;
  width: 100%
}

.col-33,.col-34 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%
}

.col-50 {
  flex: 0 0 50%;
  max-width: 50%
}

.col-25 {
  flex: 0 0 25%;
  max-width: 25%
}

.col-20 {
  flex: 0 0 20%;
  max-width: 20%
}

.padding,.padding10 {
  padding: 10px
}

.padding-4 {
  padding: 4px
}

._padding10 {
  height: 62px;
  padding: 10px
}

.padding5 {
  padding: 5px
}

.padding0-5 {
  padding: 0 5px
}

.padding5-10 {
  padding: 5px 10px
}

.padding10-5 {
  padding: 10px 5px
}

.padding20 {
  padding: 20px
}

.padding20-0 {
  padding: 20px 0
}

.padding10-0 {
  padding: 10px 0
}

.padding0-20 {
  padding: 0 20px
}

.padding0-10 {
  padding: 0 10px
}

.padding20-10 {
  padding: 20px 10px
}

.padding10-20 {
  padding: 10px 20px
}

.padding14-20 {
  padding: 14px 20px
}

.padding20-14 {
  padding: 20px 14px
}

.padding10-14 {
  padding: 10px 14px
}

.padding14-10 {
  padding: 14px 10px
}

.padding-top {
  padding-top: 10px
}

.padding-top20 {
  padding-top: 20px
}

.padding-bottom {
  padding-bottom: 10px
}

.padding-bottom20 {
  padding-bottom: 20px
}

.padding-left {
  padding-left: 10px
}

.padding-left20 {
  padding-left: 20px
}

.padding-right {
  padding-right: 10px
}

.padding-right20 {
  padding-right: 20px
}

.margin,.margin10 {
  margin: 10px
}

.margin-20 {
  margin: 20px
}

.margin-top,.margin-top10 {
  margin-top: 10px
}

.margin-top5 {
  margin-top: 5px
}

.margin-top18 {
  margin-top: 18px
}

.margin-top20 {
  margin-top: 20px
}

.margin-top30 {
  margin-top: 30px
}

.margin-bottom,.margin-bottom10 {
  margin-bottom: 10px
}

.margin-bottom5 {
  margin-bottom: 5px
}

.margin-bottom20 {
  margin-bottom: 20px
}

.margin-bottom30 {
  margin-bottom: 30px
}

.margin-left,.margin-left10 {
  margin-left: 10px
}

.margin-left5 {
  margin-left: 5px
}

.margin-left20 {
  margin-left: 20px
}

.margin-left50 {
  margin-left: 50px
}

.margin-right {
  margin-right: 10px
}

.margin-right5 {
  margin-right: 5px
}

.margin-right20 {
  margin-right: 20px
}

.margin-right30 {
  margin-right: 30px
}

.margin20-0 {
  margin: 20px 0
}

.margin10-0 {
  margin: 10px 0
}

.margin0-20 {
  margin: 0 20px
}

.margin0-10 {
  margin: 0 10px
}

.margin10-20 {
  margin: 10px 20px
}

.margin20-10 {
  margin: 20px 10px
}

.margin30-0 {
  margin: 30px 0
}

.float-left {
  float: left
}

.float-right {
  float: right
}

.border {
  border: 1px solid #f6f6f6
}

.border-gray {
  border: 1px solid #ccc
}

.border-bottom-gray {
  border-bottom: 1px solid #ccc
}

.border-top-gray {
  border-top: 1px solid #ccc
}

.border-left-gray {
  border-left: 1px solid #ccc
}

.border-right-gray {
  border-right: 1px solid #ccc
}

.border-radius {
  border-radius: 4px
}

.border-top {
  border-top: 1px solid #f0f0f0
}

.border-bottom {
  border-bottom: 1px solid #f0f0f0
}

.border-left {
  border-left: 1px solid #f0f0f0
}

.border-right {
  border-right: 1px solid #f0f0f0
}

.border4A89F0 {
  border: 1px solid #4a89f0
}

.no-border {
  border: none
}

.has-header {
  top: 44px
}

.has-subheader {
  top: 88px
}

.bar,.footer-bar,.header-bar,.subheader-bar {
  align-items: center;
  display: flex;
  height: 44px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%
}

.header-bar {
  top: 0
}

.subheader-bar {
  top: 44px
}

.footer-bar {
  bottom: 0
}

.item-44 {
  align-items: center;
  color: #444;
  display: flex;
  font-size: 14px;
  height: 44px
}

.relative {
  position: relative
}

.absolute {
  position: absolute
}

.flex {
  display: flex
}

.flex-column {
  display: flex;
  flex-direction: column
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap
}

.flex-end {
  display: flex;
  justify-content: flex-end
}

.flex-around {
  display: flex;
  justify-content: space-around
}

.flex-between {
  display: flex;
  justify-content: space-between
}

.flex-center {
  display: flex;
  justify-content: center
}

.flex-middle {
  display: flex
}

.align-center,.flex-middle {
  align-items: center
}

.align-end {
  align-items: flex-end
}

.inline {
  display: inline-block
}

.line-height20 {
  line-height: 20px
}

.line-height24 {
  line-height: 24px
}

.line-height28 {
  line-height: 28px
}

.line-height30 {
  line-height: 30px
}

.line-height32 {
  line-height: 32px
}

.line-height40 {
  line-height: 40px
}

.line-height50 {
  line-height: 50px
}

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap
}

.word-wrap {
  word-wrap: break-word;
  word-break: break-all
}

.box-shadow {
  box-shadow: 1px 1px 3px #9e9e9e
}

.status-block {
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  text-align: center
}

.status-block.gray {
  background: #c4c4c3;
  color: #fff
}

.status-block.green {
  background: #96cc66
}

.status-block.yellow {
  background: #facd91
}

.status-block.theme {
  background: #81d3f8
}

.status-block.red {
  background: red
}

.ld.reverse {
  animation-direction: reverse
}

.ld.xhalf {
  animation-duration: .5s
}

.ld.x1 {
  animation-duration: 1s
}

.ld.x2 {
  animation-duration: 2s
}

.ld.x4 {
  animation-duration: 4s
}

.ld.running {
  animation-play-state: running
}

.ld.paused {
  animation-play-state: paused
}

.ld.f00 {
  animation-delay: 0s
}

.ld.f01 {
  animation-delay: -.1s
}

.ld.f02 {
  animation-delay: -.2s
}

.ld.f03 {
  animation-delay: -.3s
}

.ld.f04 {
  animation-delay: -.4s
}

.ld.f05 {
  animation-delay: -.5s
}

.ld.f06 {
  animation-delay: -.6s
}

.ld.f07 {
  animation-delay: -.7s
}

.ld.f08 {
  animation-delay: -.8s
}

.ld.f09 {
  animation-delay: -.9s
}

.ld.f10 {
  animation-delay: -1s
}

.ld-ball,.ld-cross,.ld-hourglass,.ld-loader,.ld-pie,.ld-ring,.ld-spinner,.ld-square {
  color: inherit;
  display: inline-block;
  height: 1em;
  position: relative;
  width: 1em
}

.ld-ball:after,.ld-cross:after,.ld-hourglass:after,.ld-loader:after,.ld-pie:after,.ld-ring:after,.ld-spinner:after,.ld-square:after {
  background: 50% no-repeat;
  background-size: cover;
  bottom: 0;
  content: " ";
  display: inline-block;
  height: 100%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%
}

.ld-ball:after {
  background: currentColor;
  border-radius: 50%
}

.ld-pie:after {
  border: .5em solid;
  border-left: .5em solid #0000;
  border-radius: 50%;
  height: 0;
  width: 0
}

.ld-pie:after,.ld-ring:after {
  -webkit-background-clip: padding-box
}

.ld-ring:after {
  border: .15em solid;
  border-left: .15em solid #0000;
  border-radius: 50%;
  box-sizing: border-box
}

.ld-hourglass:after {
  background: none;
  border-color: currentcolor #0000;
  border-radius: 50%;
  border-style: solid;
  border-width: .5em;
  height: 0;
  width: 0
}

.ld-cross:after {
  background: currentColor;
  box-shadow: 0 .18em 0 1px currentColor,0 -.18em 0 1px currentColor,.18em 0 0 1px currentColor,-.18em 0 0 1px currentColor,0 .36em 0 1px currentColor,0 -.36em 0 1px currentColor,.36em 0 0 1px currentColor,-.36em 0 0 1px currentColor;
  height: 18%;
  width: 18%
}

.ld-square:after {
  background: currentColor;
  height: 90%;
  width: 90%
}

.ld-spinner:after {
  background: none;
  border-radius: 50%;
  box-shadow: 0 .5em 0 0 currentColor,0 -.5em 0 0 currentColor,.5em 0 0 0 currentColor,-.5em 0 0 0 currentColor,.35355339em .35355339em 0 0 currentColor,-.35355339em .35355339em 0 0 currentColor,.35355339em -.35355339em 0 0 currentColor,-.35355339em -.35355339em 0 0 currentColor;
  height: 20%;
  width: 20%
}

.ld-loader {
  background-size: cover
}